<template>
  <div class="user-list" v-loading="loading">
    <el-page-header content="网域管理" title="后台管理系统" icon=""></el-page-header>
    <el-button type="primary" size="large" @click="isDialog = true">新增网域</el-button>
    <el-table ref="tableRef" row-key="date" :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="域名" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="tag" label="编辑选项" width="200">
        <template #default="scope">
          <el-button type="primary" @click.prevent="editRow(scope.$index)">修改</el-button>
          <el-button type="danger" style="margin-left: 10px;" @click.prevent="deleteRow(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 10px;" background layout="prev, pager, next" :total="total"
      v-model:current-page="formFilter.page" :default-page-size="formFilter.pages" @current-change="changeListData" />
    <Add v-model="isDialog" title="新增网域" @close="isDialog = false" @success="restUserData" v-if="isDialog"></Add>
    <Edit v-model="isEdit" title="修改用户" @close="isEdit = false" :id="userId" v-if="isEdit" @success="restUserData"></Edit>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { getDomainList, deleteDomain } from '@/server/domain'
import { ElMessage, ElMessageBox } from 'element-plus'
import Add from './Add.vue'
import Edit from './Edit.vue'
const formFilter = reactive({
  page: 1,
  pages: 6
})
const total = ref(0)
const loading = ref(true)
const isDialog = ref(false)
const isEdit = ref(false)
const userId = ref('')
let tableData: any = ref([])
//筛选数据
const changeListData = () => {
  getUserListData()
}
const getUserListData = async () => {
  const params = {
    SkipCount: formFilter.page > 1 ? (formFilter.page - 1) * formFilter.pages : 0,
    MaxResultCount: formFilter.pages
  }
  const data = await getDomainList(params)
  total.value = data.totalCount
  tableData.value = data.items
  loading.value = false
}
getUserListData()
const restUserData = () => {
  isDialog.value = false
  isEdit.value = false
  getUserListData()
}
const editRow = (index: number) => {
  userId.value = tableData.value[index].id
  isEdit.value = true
}
const deleteRow = (index: number) => {
  const userId = tableData.value[index].id
  ElMessageBox.confirm(
    '确定要删除?',
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      await deleteDomain(userId)
      ElMessage.success("删除成功")
      tableData.value.splice(index, 1)
    })
}
</script>

<style lang="scss" scoped>
.user-list {
  .el-button {
    margin: 20px 0
  }
}
</style>